<template>
  <div class="business-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="complate-content"
        v-for="(item, index) in tamplate"
        :key="index"
      >
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.book118.com%2Fsr1%2FM00%2F2F%2F23%2FwKh2C2CSxuCIf7BWAABPX61GWMsAAsPUgDIzXsAAE93238.png&refer=http%3A%2F%2Fimg.book118.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623318609&t=f23ad89e4f9e096230b78a1dcee0fa02"
          alt=""
        />
        <div class="content-right">
          <span>《{{ item.templateName }}》模板</span>
          <button @click="useTemplate(item)">使用</button>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { touchVersion } from '@/api/user'
export default {
  name: 'BusinessList',
  data() {
    return {
      tamplate: [],
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      total: 0,
      pageNumber: 1
    }
  },
  props: {
    businessType: {
      type: Number
    }
  },
  created() {},
  mounted() {},
  methods: {
    async onLoad() {
      try {
        const { data: res } = await touchVersion({
          userId: this.$store.state.userName.userId,
          pageNumber: this.pageNumber,
          pageSize: 5,
          businessType: this.businessType
        })
        if (res.code !== '0') {
          return this.$toast.fail('数据获取失败')
        }
        this.tamplate.push(...res.data.records)
        this.total = res.data.total
        this.pageNumber++
        // 设置本次加载中 loading 状态结束
        this.loading = false
        // 判断数据是否加载结束
        if (this.tamplate.length >= this.total) {
          this.finished = true
        }
      } catch (error) {
        console.log(error)
      }
    },
    useTemplate(item) {
      this.$router.push({
        name: 'useTemplateCreateContract',
        params: { contractAll: item }
      })
    }
  }
}
</script>

<style scoped lang="less">
.business-list {
  height: 50.1vh;
  overflow-y: auto;
  .complate-content {
    height: 180px;
    display: flex;
    align-items: center;
    background-color: #fff;
    img {
      width: 98px;
      height: 124px;
      border: 1px solid #e4e4e4;
      margin: 0 27px 0 40px;
    }
    div {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e4e4;
      span {
        font-size: 30px;
      }
      button {
        width: 92px;
        height: 50px;
        background-color: #2489f2;
        border-radius: 6px;
        font-size: 24px;
        color: #fff;
        border-width: 0px;
        margin-right: 40px;
      }
    }
  }
}
</style>
